<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<style type="text/css">
html, body, #canvas {
	height: 100%;
	padding: 0;
}

.diagram-note {
	background-color: rgba(66, 180, 21, 0.7);
	color: White;
	border-radius: 5px;
	font-family: Arial;
	font-size: 12px;
	padding: 5px;
	min-height: 16px;
	width: 50px;
	text-align: center;
}

.needs-discussion:not (.djs-connection ) .djs-visual>:nth-child(1) {
	stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}
</style>
<title>流程图</title>

</head>
<body>
	<!-- element to draw bpmn diagram in -->
	<div id="canvas"></div>

	<!-- scripts -->

	<!-- seed dependencies (required for demo only) -->
	<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

	<!-- bpmn-js viewer -->
	<script src="bower_components/bpmn-js/dist/bpmn-viewer.js"></script>

	<!-- application -->
	<script src="index-async.js"></script>
	<input type="hidden" id="taskName" name="taskName" th:value="${taskName}" />
	<script type="text/javascript">
		function getUrl(){
			var hrew = window.location.href;
	  		hrew = hrew.substr(hrew.indexOf("?")+1);
	  		var hrews = hrew.split("&");
	  		var urlData = {};
	  		for(var i =0 ; i<hrews.length ;i++){
	      		var hrew = hrews[i];
	      		var indx = hrew.indexOf("=");
	      		var key = hrew.substr(0,indx);
	      		var value = hrew.substr(indx+1);
	      		urlData[key] = value;
	  		}
	  		return urlData;
		}
	</script>
	<script>
  		var deploymentId=getUrl().deploymentId;
  		importAjax(url+portC+"deviceExceptionController/findResource/62539"/* +deploymentId */);
  </script>
  <script type="text/javascript">
	$(document).ready(function()
	  	{
			//添加点击事件
			var length=$("g.djs-element").length;
			var arr=new Array(length);
			arr=$("g.djs-element");
			for(var i=0;i<arr.length;i++){
				var temp=arr[i].attributes[1].value;
				$("[data-element-id='"+temp+"']").attr("id",temp);
				$("[data-element-id='"+temp+"']").click(function(){
					//alert($(this).attr("id"));
					$.ajax({
						   type: "GET",
						   async:false,
						   url: url+portP+"history/historic-task-instances/80005",
						   success: function(data){
							   alert("开始时间:"+data.startTime+",结束时间:"+data.endTime+",办理人:"+data.assignee);
						   }
						});
				});
			}
			//将正在运行的任务变成红色
			var taskName=getUrl().taskName;
			$('#'+taskName).attr("stroke","red");
		});
</script>
</body>
</html>